<script setup lang="ts">
import useNaiveI18n from '@/i18n/useNaiveI18n'
import { useMusic, initMusic, MusicPlayMode } from '@/store/useMusic'
import useMainWin from './useMainWin'
import useQuitApp from './useQuitApp'
import { ref, Ref } from 'vue'

useQuitApp()
const { locale, dateLocale } = useNaiveI18n()
const music = useMusic()
const mainWin = useMainWin()
const musicRef = ref() as Ref<HTMLAudioElement>
initMusic(musicRef)
</script>

<template>
  <!-- 公共配置 -->
  <n-config-provider
    :locale="locale"
    :date-locale="dateLocale"
    class="flex flex-col h-screen overflow-hidden border"
    :class="{ rounded: $IS_ELECTRON && !mainWin.isMaximize.value }"
  >
    <div v-if="$IS_ELECTRON" class="h-2 fixed top-0 left-0 w-full z-9" style="-webkit-app-region: drag" />
    <!-- 顶部 -->
    <div class="flex bg-green-500 text-white py-2 px-4 items-center">
      <div class="cursor-pointer flex space-x-3 items-center whitespace-nowrap">
        <img src="@/assets/img/logo.png" class="rounded-full h-12 w-12" />
        <h1 class="ml-5 text-xl">N A S</h1>
      </div>
      <div class="ml-auto mr-10">
        <div v-show="$useUserInfo().token" class="flex items-center">
          <n-dropdown
            trigger="click"
            :options="[{ key: 'loginOut', label: $t('login-out') }]"
            @select="() => $router.push('/login')"
          >
            <n-button color="#FFF" text-color="#333">{{ $useUserInfo().name }}</n-button>
          </n-dropdown>
        </div>
      </div>

      <div class="font-bold">
        <n-popover trigger="hover">
          <template #trigger>
            <span class="cursor-pointer">{{ $useEnv().isIpv6 ? 'IPV6' : 'IPV4' }}</span>
          </template>
          <div>
            <div v-if="$useEnv().isIpv6">{{ $t('your-network-is-ipv6') }}</div>
            <div v-else>
              <p>{{ $t('your-network-is-ipv4') }}</p>
              <p>{{ $t('network-speed-is-max-10mbps') }}</p>
            </div>
          </div>
        </n-popover>
      </div>

      <div class="flex h-full space-x-4 text-lg ml-10 text-gray-100 fa items-center">
        <b v-if="$route.fullPath === '/settings'" class="fa fa-home" :title="$t('home')" @click="$router.push('/')" />
        <b v-else class="fa-cog" :title="$t('settings')" @click="$router.push('/settings')" />
        <template v-if="$IS_ELECTRON">
          <b class="fa-minus" :title="$t('win-mini')" @click="mainWin.minimize" />
          <b
            :class="mainWin.isMaximize.value ? 'fa-window-restore' : 'fa-window-maximize'"
            :title="$t('win-max')"
            @click="mainWin.maximize"
          />
          <b class="fa-times" hover="!text-red-50" :title="$t('quit')" @click="mainWin.close" />
        </template>
      </div>
    </div>

    <!-- 主内容 -->
    <div class="bg-white flex-1 overflow-y-auto">
      <router-view />
    </div>

    <!-- 音乐播放器 -->
    <audio
      ref="musicRef"
      :src="music.getAudioSrc"
      preload="auto"
      @playing="music.$patch({ isPlay: true })"
      @play="music.$patch({ isPlay: true })"
      @abort="music.$patch({ isPlay: false })"
      @pause="music.$patch({ isPlay: false })"
      @error="music.$patch({ isPlay: false })"
      @durationchange="music.$patch({ totalTime: musicRef.duration })"
      @timeupdate="music.$patch({ currentTime: musicRef.currentTime })"
    />
    <div class="bg-white shadow-lg fa relative" @click.stop>
      <!-- 播放进度条 -->
      <n-slider
        v-show="music.show"
        v-model:value="music.currentTime"
        :min="0"
        :max="music.totalTime"
        :step="0.01"
        class="transform top-0 left-0 -translate-y-1/2 absolute"
        @update:value="currentTime => (musicRef.currentTime = currentTime)"
      />
      <div
        class="flex h-full px-5 duration-300 items-center overflow-hidden"
        :class="music.show ? 'h-20 opacity-100' : 'h-0 opacity-0'"
      >
        <div class="py-1px w-1/3 truncate" :title="music.getCurrentMusicInfo?.fileName">
          {{ music.getCurrentMusicInfo?.fileName }}
        </div>
        <div class="flex mx-auto space-x-10 px-20 text-3xl text-green-400 items-center justify-center">
          <!-- 播放上一首 -->
          <b class="fa-caret-left" :title="music.getLastMusicInfo?.fileName" @click="music.playLast" />
          <div class="text-5xl">
            <!-- 暂停 -->
            <b v-show="music.isPlay" class="fa-pause-circle-o" @click="music.musicRef!.pause()" />
            <!-- 播放 -->
            <b v-show="!music.isPlay" class="fa-play-circle-o" @click="music.musicRef!.play()" />
          </div>
          <!-- 播放下一首 -->
          <b class="fa-caret-right" :title="music.getNextMusicInfo?.fileName" @click="music.playNext" />
        </div>
        <div class="flex w-1/3 items-center justify-between">
          <div class="space-x-8 text-lg text-green-400">
            <b
              v-for="item in [
                { icon: 'fa-circle-o-notch', mode: 'single', title: $t('single-play') },
                { icon: 'fa-refresh', mode: 'cycle', title: $t('single-cycle') },
                { icon: 'fa-bars', mode: 'order', title: $t('order-play') },
                { icon: 'fa-random', mode: 'random', title: $t('random-play') }
              ]"
              :key="item.icon"
              :class="[item.icon, { '!brightness-40': music.playMode === item.mode }]"
              :title="item.title"
              @click="music.playMode = item.mode as MusicPlayMode"
            />
          </div>
          <div class="mr-5 whitespace-nowrap">
            {{ music.currentTime.toFixed(2) }}/{{ music.totalTime.toFixed(2) }}{{ $t('second') }}
          </div>
          <b class="top-3 right-3 text-green-400 fa-times absolute" @click="music.$patch({ show: false })" />
        </div>
      </div>
    </div>
  </n-config-provider>
</template>

<style scoped>
.fa b {
  @apply cursor-pointer font-thin duration-300 filter hover:brightness-40;
}
</style>
